<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			height: 100px;
			width: 100px;
			background-color: gray;
		}
		.bg-danger {
			background-color: red;
		}
		.bg-blue {
			background-color: blue;
		}
		
		.box1 {
			width: 500px;
			height: 400px;
			border: 2px solid #333;
		}
		
		.box2 {
			width: 300px;
			height: 300px;
			border: 2px solid #f0f;
			margin: 50px auto;
		}
		.box3 {
			width: 100px;
			height: 100px;
			background-color: aqua;
			margin: 50px auto;
		}
	</style>
</head>
<body>
	<!-- 
	const vm = new Vue({ el, data, computed, watch, methods, ... })
	 
	 {{  }}, v-html, v-bind === :, v-on === @
	 v-if, v-for
	 
	 v-on === @
	 $event
	 -->
	<div id="app">
		<h1>{{ msg }}</h1>
		
		<hr>
		
		
		<form action="" @submit.prevent>
			<!-- <input type="text" v-model="uname" @keydown.enter="handleChange"> -->
			<!-- <input type="text" v-model="uname" @keydown.13="handleChange"> -->
			<input type="text" v-model="uname" @keydown.ctrl.13="handleChange">
			<button>submit</button>
		</form>
		
		
		<hr>
		<div class="box1" @click="handleClickBox1">
			<div class="box2" @click.stop="handleClickBox2($event)">
				<div class="box3" @click.stop="handleClickBox3"></div>
			</div>
		</div>
		
		<hr>
		<div @click="handleClick" class="box"></div>
		<hr>
		<div @click="handleClick1($event, 123)" class="box"></div>
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: Event！",
				uname: ""
			},
			methods: {
				handleChange() {
					console.log(this.uname)
				},
				handleClickBox1() {
					console.log("box1")
				},
				handleClickBox2(event) {
					// event.stopPropagation()
					console.log("box2")
				},
				handleClickBox3(event) {
					// event.stopPropagation()
					console.log("box3")
				},
				handleClick(event) {
					console.log(this)
					console.log(event)
				},
				handleClick1(event, ot) {
					console.log('1:', event)
					console.log('1:', ot)
				}
			},
		}).$mount("#app")
	</script>
</body>
</html>